<style>
label{
	font-size: 12px;
}
.checkBox input[type=checkbox]{
	background-color: rgba(218, 218, 218, 0.4);
	-webkit-appearance:none;
	border: 1px solid rgba(218, 218, 218, 0.4);
	border-radius: 2px;
	outline: none;
}
.checkBox input[type=checkbox]:checked{
	background: url("/eova/ui/images/checked.png")no-repeat center;
}
</style>
<div id="mycheck_${field.en}">
	<input type="hidden" name="${name}" value="${value!field.defaulter}">
</div>
<script>
// JS 可以干预控件所在页面的任何效果
$('#mycheck_${field.en}').parent().parent().css("width", "95.5%");

$(function(){

	var idName = "mycheck_${field.en}";
	var $checks = $('#' + idName);
	var $checkValue = $checks.find("input:hidden");
	console.info('${field.en}--${name}--${value}--${readOnly}');

	// 加载数据(复选框其实和下拉一样，只是展现方式不一样，所以直接用下拉的API获取数据)
	var url = "/widget/comboJson/${field.object_code}-${field.en}";
	$.ajax({
        type: 'get',
        async: true,
        url: url,
        dataType: "json",
        success: function (json) {
        	// 生成复选框Dom
            $.each(json, function (index, o) {
				if('${readOnly}'=='true'){
					$("<label class='checkBox'><input onclick=\"return false\" type=\"checkbox\" value=\"" + o.id + "\">" + o.cn + "&nbsp;</label>").appendTo($checks);
				}else{
					$("<label><input type=\"checkbox\" value=\"" + o.id + "\">" + o.cn + "&nbsp;</label>").appendTo($checks);
				}
            });
        	// 初始化选中
        	var vals = $checkValue.val().split(",");
        	$checks.find('input:checkbox').each(function(i, o){
        		for (var i = 0; i < vals.length; i++) {
        			if(vals[i] == $(o).val()){
        				o.checked = true;
        				break;
        			}
        		}
        	});
        	// 绑定复选框事件
            $checks.find('input:checkbox').change(function(){
        		var vals = getCheckIds();
        		$checkValue.val(vals);
        	});
        },
        error: function () {
            alert('复选框加载数据失败,URL=' + url);
        }
    });

	// 获取所有选中ID
	function getCheckIds(){
	    var vals = [];
	    $checks.find("input:checked").each(function() {
	        vals.push($(this).val());
		});
	    return vals.join(",");
	}

});
</script>
